import React from 'react';
import './check.scss';
import {observer, observable, action} from 'mobx.collection';
import $ from 'auxiliaries/extends/dom7.collection';
import {Storage as createStorage} from 'storage';

@observer
class SearchHistoryList extends React.Component {
    #storage;
    #SearchElement;
    @observable SearchKeywordList = [];

    constructor(props) {
        super(props);

        this.#storage = createStorage('--search-history-list' + (this.props?.['storageKey'] || ''), true);
    }


    componentDidMount() {
        this.SearchKeywordList = this.#storage.get() || [];
        this.register(this.props);
    }

    register(props) {
        let {
            refs
        } = props;

        if (refs && this.#SearchElement !== refs) {
            this.#SearchElement = refs;
            this.call = [
                _ => this.refInput(_),
                _ => this.onSubmit(_)
            ];
            let $ref = $(refs);
            if ($ref.is('input')) {
                // $ref.on('input', this.call[0]);
                $ref.parents('form').on('submit', this.call[1]);
                $ref.on('blur', this.call[1]);
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        this.register(nextProps);
    }

    // refInput({target}) {
    //     console.log(target.value);
    // }

    @action
    onSubmit() {
        let keyword = this.#SearchElement.value.trim();

        if (!keyword) {
            return;
        }

        let index = this.SearchKeywordList.indexOf(keyword);
        if (index >= 0) {
            //将搜索关键字放在最前面
            this.SearchKeywordList.splice(index, 1);
        }

        this.SearchKeywordList.splice(0, 0, keyword);
        this.#storage.add(this.SearchKeywordList);
    }

    onClear() {
        this.SearchKeywordList = [];
        this.#storage.remove();
    }

    componentWillUnmount() {
        let {
            refs: ref
        } = this.props;
        let $ref = $(ref);

        if (this.call) {
            // $ref.off('input', this.call[1]);
            $ref.off('submit', this.call[0]);
            $ref.parents('form').off('submit', this.call[1]);
            $ref.off('blur', this.call[1]);
        }
    }

    render() {
        let {
            buttonClassName,
            buttonChildren,
            onClick: onClickToKeyword
        } = this.props;
        return (
            <>
                <div className={"--search-history-list font-size-24"}>
                    {this.SearchKeywordList.map(x => (
                        <div className={"--search-item touch-active"} key={x} onClick={() => onClickToKeyword?.(x)}>
                            {
                                x ? <span>{x}</span> : <span>&nbsp;</span>
                            }

                        </div>
                    ))}
                </div>
                <div className={"--search-button-clear" + (buttonClassName ? ` ${buttonClassName}` : '')}
                     onClick={() => this.onClear()}>
                    {buttonChildren}
                </div>
            </>
        );
    }
}

export default SearchHistoryList;